<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <span>app</span>
        <span>{{msg}}</span>
        <v-img v-for="(img,index) in imgArrs" :key="index"
               :src="img.src" :title="img.title"></v-img>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"app-msg",
            imgArrs:[
                {src:"./img/laop.jpg",title:"达姆大老婆"},
                {src:"./img/xlaop.jpg",title:"达姆小老婆"},
                {src:"./img/xlaop.jpg",title:"达姆小老婆"},
                {src:"./img/xlaop.jpg",title:"达姆小老婆"},
                {src:"./img/xlaop.jpg",title:"达姆小老婆"}
            ]
        },
        components:{
            "v-img":{
               props:["src","title"],
               template:`
                <div>
                    <h5 style="width: 200px;text-align: center">
                        {{title}}
                    </h5>
                    <img :src="src" width="200" />
                </div>
               `
             }
        }
    })
</script>
</html>